<template>
  <div class="slideshow-box" @mouseenter="mouseenterSlide" @mouseleave="mouseleaveSlide">
    <div class="slideshow-btn" v-show="btnFlag">
      <svg class="icon icon-xiangzuo" aria-hidden="true" @click="leftBtn">
        <use xlink:href="#icon-xiangzuo"></use>
      </svg>
      <svg class="icon icon-xiangyou" aria-hidden="true" @click="rightBtn">
        <use xlink:href="#icon-xiangyou"></use>
      </svg>
    </div>
    <ul class="slideshow-ul">
      <li v-for="(item,index) in SlideshowData" :key="index" class="slideshow-minbox">
        <a :href="item.url" class="slideshow-url" target="_blank">
         <img v-layz :src="item.src" :alt="item.title" :title="item.title" class="slideshow-img">
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Slideshow',

  props: {
    SlideshowData: Array //图片数据
  },

  data() {
    return {
      timer: null, //自动轮播定时器
      btnFlag: false //左右按钮的显示与隐藏
    };
  },

  activated(){
     this.mouseleaveSlide()
  },

  deactivated(){
    clearInterval(this.timer)
  },

  methods: {
    // 向左按钮
    leftBtn(){
     let box = document.querySelector('.slideshow-ul')
     let first =  box.firstChild
     let newFirst = first.cloneNode(true)
     first.remove()
     box.appendChild(newFirst)
    },
    // 向右按钮
    rightBtn(){
      let box = document.querySelector('.slideshow-ul')
      let last =  box.lastChild
      let newLast = last.cloneNode(true)
      last.remove()
      box.insertBefore(newLast,box.firstChild)
    },
    // 鼠标移入轮播图
    mouseenterSlide(){
      this.btnFlag = true
      clearInterval(this.timer)
    },
    // 鼠标移出轮播图
    mouseleaveSlide(){
      this.btnFlag = false
      this.timer = setInterval(() => {
        this.rightBtn()
      }, 3000);
    }
  },
};
</script>

<style scoped>
.slideshow-box{
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  margin: 30px auto;
  background-color: rgb(241, 241, 241);
  display: flex;
  justify-content: center;
}
.slideshow-box .slideshow-ul{
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1300px;
}

.slideshow-box .slideshow-img{
  width: 500px;
  height: 300px;
}
.icon-xiangzuo,.icon-xiangyou{
  position: absolute;
  top: 130px;
  font-size: 40px;
  z-index: 999;
  cursor: pointer;
}
.icon-xiangyou{
  right: 50px;  
}
.icon-xiangzuo{
  left: 50px;
}
.slideshow-ul .slideshow-minbox{
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s ease;
}
.slideshow-ul .slideshow-minbox:first-child{
  transform: scale(0.8);
}
.slideshow-minbox:nth-child(3){
  z-index: 99;
  left: 400px;
}
.slideshow-minbox:nth-child(2n){
  z-index: 88;
  transform: scale(0.9);
}
.slideshow-minbox:nth-child(2){
  left: 200px;
}
.slideshow-minbox:nth-child(4){
  left: 600px;
}
.slideshow-minbox:last-child{
  transform: scale(0.8);
  left: 800px;
}
@media screen and (max-width:1300px){
  .slideshow-ul{
    transform: scale(0.9) translateX(-50px);
  }
}
@media screen and (max-width:1200px){
  .slideshow-ul{
    transform: scale(0.9) translateX(-100px);
  }
}
@media screen and (max-width:1100px){
  .slideshow-ul{
    transform: scale(0.8) translateX(-120px);
  }
}
</style>